<template>
  <div class="mobile-show-setting">
    <el-tooltip :content="content" placement="top">
      <el-checkbox :value="field.isAppShow" @input="update" :true-label="1" :false-label="0" :disabled="isDisabled">
        {{$t('common.base.mobilePreview')}}
        <template v-if="!field.isCommon">( {{ mobileShowField.length }}/{{ taskMobileShowMaxLengthMax }} ) </template>
        <i class="iconfont icon-question"></i>
      </el-checkbox>
    </el-tooltip>
  </div>
</template>

<script>
/* config */
import * as config from '@src/component/form/config';
/* props */
import { settingProps } from '@src/component/form/components/props';
import i18n from '@src/locales'

export default {
  name: 'mobile-show-setting',
  props: {
    ...settingProps,
    isTaskMode: {
      type: Boolean,
      default: true,
    },
    isEventMode: {
      type: Boolean,
      default: false,
    }
  },
  computed: {
    // 是否禁用
    isDisabled() {
      return this.mobileShowField.length >= this.taskMobileShowMaxLengthMax && this.field.isAppShow !== 1 && !this.field.isCommon;
    },
    // 工单：移动端显示的 字段列表
    mobileShowField() {
      return this.fields.filter(field => field.isAppShow === 1 && !field.isCommon);
    },
    // 工单移动端展示最大数量
    taskMobileShowMaxLengthMax() {
      return config.TASK_MOBILE_SHOW_MAX_LENGTH_MAX;
    },
    content() {
      
      if (this.isEventMode) {
        return i18n.t('common.form.tip.mobileShowSetting.tips1')
      }
      
      if (this.isTaskMode) {
        return i18n.t('common.form.tip.mobileShowSetting.tips2')
      }
      
      return ''
    }
  },
  methods: {
    update(value) {
      this.$emit('input', value, 'isAppShow');
    }
  }
}
</script>

<style>

</style>